<template>
	<view class="box">
		<!-- 拍照 -->
		<view class="upload_video" @click="addPhoto" v-if="!imgUrl">
			<view>
				<view class="img">
					<image src="https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/rtt/tool/add.png" mode=""></image>
				</view>
				<view class="text">
					开始拍照
				</view>
			</view>
		</view>
		<view class="upload_videos" v-if="imgUrl">
			<view class="file_block">
				<view class="file_img">
					<image :src="imgUrl" mode=""></image>
				</view>
			</view>
		</view>

		<view class="writ_text">
			<view :style="{color: 1? '#5C5C5C' : ''}">
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
					@scrolltolower="lower" @scroll="scroll">
					<view id="demo1" class="scroll-view-item uni-bg-red">{{value1}}</view>
				</scroll-view>
			</view>
		</view>

		<view class="top_block">
			<view class="click_btn" @click="opens()">
				<view class="get_text">
					复制文案
				</view> 
			</view>
		</view>
		<view class="warringTip" v-if="imgUrl">
			如需更改请退出重新上传
		</view>
		
		<u-modal :show="shows" :title="'温馨提示'" :content="content" cancelText="取消" confirmText="开通会员"
			showCancelButton="true" @cancel="cancel" @confirm="govip" :closeOnClickOverlay="true"
			@close="shows = false"></u-modal>
	</view>
</template>

<script>
	import {
		getInfo
	} from '@/business/systeminfo.js';
	import {
		login,
		isLogin,
		vipType
	} from '@/business/login.js';
	var uploadImage = require('@/utils/upload/uploadFile.js');
	var util = require('@/utils/item.js');

	export default {
		data() {
			return {
				value1: '文案提取结果',
				title: '修改名称',
				title2: '温馨提示',
				isVip: false,
				content: '您还不是会员,此功能需开通会员才可使用。',
				isLogin: false, //是否登录
				vipType: false, //是否会员
				shows: false,
				videoUrl: '',
				time: '',
				value: '',
				list1: [],
				base64: '',
				access_token: '',
				api: '/rest/2.0/ocr/v1/general_basic',
				works: [],
				URL: '',
				imgUrl: ''
			};
		},
		onLoad() {
			if (uni.getStorageSync('set_photo')) {
				this.imgUrl = uni.getStorageSync('set_photo')
				this.getAccess_token(uni.getStorageSync('set_photo'))
			}
		},
		onShow() {
			this.vipType = uni.getStorageSync('vipType').vipStatus == 1 ? true : false;
		},
		onUnload() {
			uni.removeStorageSync('set_photo');
		},
		methods: {
			govip() {
				this.shows = false;
				if (uni.getStorageSync('OS') !== 'ios') {
					uni.navigateTo({
						url: '/pages/paymentCenter/paymentCenter'
					});
				} else {
					if (getApp().globalData.iosPay == 0) {
						uni.showModal({
							title: '提示',
							content: '由于相关规范，IOS功能暂不可用',
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									console.log('用户点击确定');
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					} else if (getApp().globalData.iosPay == 1) {
						uni.navigateTo({
							url: '/pages/goods/goods'
						});
					}
				}
			},
			cancel() {
				this.shows = false;
			},
			opens() {
				if (this.vipType) {
					if (this.value1 == '文案提取结果' || this.value1 == '') {
						wx.showToast({
							title: '请上传文件！',
							icon: 'none',
							duration: 2000
						})
					} else {
						let _this = this;
						uni.setClipboardData({
							data: _this.value1,
							success: function() {
								//调用方法成功
								console.log('success');
							}
						});
					}

				} else {
					this.shows = true;
				}
			},
			addPhoto() {
				if (this.vipType) {
					uni.redirectTo({
						url: '/pages_aiTools/PictureWord/PictureWord'
					});
				} else {
					this.shows = true;
				}
			},
			getAccess_token(url) {
				uni.showLoading({
					title: '加载中'
				});
				uni.$u.http.setConfig(config => {
					/* config 为默认全局配置*/
					config.baseURL = `https://aip.baidubce.com`; /* 根域名 */
					return config;
				});
				// 局部修改配置，局部配置优先级高于全局配置
				uni.$u.http
					.post(
						'/oauth/2.0/token', {}, {
							params: {
								client_id: 'u652Owa2D1KlECVPGCdjNjoL',
								client_secret: 'Dz49iapX7qtLNStnWfFwBN4TSwavpV8y',
								grant_type: 'client_credentials'
							} /* 会加在url上 */ ,
							header: {} /* 会与全局header合并，如有同名属性，局部覆盖全局 */ ,
							dataType: 'x-www-form-urlencoded'
						}
					)
					.then(res => {
						this.upYu(url, res.data.access_token);
					})
					.catch(err => {});
			},
			async upYu(filePath, access_token) {
				/* 图片虚拟地址上传云获取图片链接地址 */
				const houzhui = filePath.match(/\.[^.]+?$/)[0]; //后缀名的获取
				const cloudpath = 'image/' + new Date().getTime() + houzhui; //存储在云存储的地址

				let c1 = new wx.cloud.Cloud({
				// 资源方 AppID
				resourceAppid: getApp().globalData.resourceAppid,
				// 资源方环境 ID
				resourceEnv: getApp().globalData.resourceEnv,
				})
				await c1.init()

				c1.uploadFile({
					cloudPath: cloudpath,
					filePath: filePath, // 文件路径
					success: res => {
						console.log('上传云后的res', res);
						// get resource ID
						c1.getTempFileURL({
							fileList: [res.fileID],
							success: res => {
								this.uni_http(res.fileList[0].tempFileURL, access_token);
								this.URL = res.fileList[0].tempFileURL;
							},
							fail: console.error
						});
					},
					fail: err => {
						console.log(err, 'err');
					}
				});
			},
			uni_http(url, res) {
				uni.$u.http
					.post(
						this.api, {
							image: this.base64,
							url: url,
							detect_direction: "true"
						}, {
							params: {
								access_token: res
							} /* 会加在url上 */ ,
							header: {
								'content-type': 'application/x-www-form-urlencoded'
							} /* 会与全局header合并，如有同名属性，局部覆盖全局 */
						}
					)
					.then(ret => {
						uni.hideLoading();
						let _this = this;
						console.log(ret, 'ret');
						this.value1 = ""
						this.works = ret.data.words_result;
						console.log(this.works, '要保存的数据');
						ret.data.words_result.forEach((item, index, array) => {
							console.log(item.words, 'this.value1');
							this.value1 = this.value1 + item.words + '\n';
						});
					})
					.catch(err => {
						uni.hideLoading();
					});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.box {
		background-color: #ffffff;
		height: 100vh;
	}

	.upload_video {
		width: 695rpx;
		height: 139rpx;
		background: #F7F7F7;
		border-radius: 4rpx;
		margin: auto;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 30rpx;

		.img {
			display: flex;
			justify-content: center;

			image {
				width: 45rpx;
				height: 45rpx;
			}
		}

		.text {
			font-size: 21rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #B3B3B3;
			margin-top: 16rpx;
		}
	}

	.upload_videos {
		width: 695rpx;
		height: 139rpx;
		background: #F7F7F7;
		border-radius: 4rpx;
		margin: auto;
		display: flex;
		align-items: center;
		margin-top: 80rpx;

		.file_block {
			display: flex;
			margin-left: 34rpx;
			align-items: center;

			.file_img {
				width: 91rpx;
				height: 91rpx;

				image {
					width: 91rpx;
					height: 91rpx;
				}
			}

			.file_text {
				margin-left: 18rpx;

				.file_text_title {
					font-size: 31rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 56rpx;
				}

				.file_text_time {
					font-size: 18rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #979797;
					line-height: 32rpx;

					text {
						margin-left: 14rpx;
					}
				}
			}
		}
	}

	.writ_text {
		width: 647rpx;
		height: 580rpx;
		background: #F7F7F7;
		border-radius: 4px;
		margin: auto;
		margin-top: 20rpx;
		padding: 24rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #B3B3B3;
		position: relative;

		.clear {
			position: absolute;
			bottom: 14rpx;
			right: 22rpx;
			width: 112rpx;
			height: 41rpx;
			background: #FFFFFF;
			border-radius: 6rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 17rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;

			image {
				width: 19rpx;
				height: 20rpx;
				margin-right: 5rpx;
			}
		}
	}

	.top_block {
		display: flex;
		justify-content: center;
		margin-top: 80rpx;

		.click_btn {
			width: 565rpx;
			height: 89rpx;
			background: #467EFF;
			border-radius: 19rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.get_text {
				font-size: 29rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
	}

	.mask {
		.tips {
			display: flex;
			justify-content: center;
			color: #ffffff;
			font-size: 26rpx;
			margin-top: 30rpx;
		}

		.close_btn {
			width: 40rpx;
			height: 40rpx;
			position: absolute;
			right: -16rpx;
			top: -16rpx;
		}

		.vipstyle {
			margin-top: 45rpx;
			margin-left: 44rpx;

			image {
				width: 321rpx;
				height: 289rpx;
			}
		}

		.vip_btn {
			width: 287rpx;
			height: 62rpx;
			background: #484848;
			border-radius: 31rpx;
			font-size: 23rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFCC75;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.flex {
			display: flex;
			justify-content: center;
			margin-top: 34rpx;
		}
	}

	.warringTip {
		font-size: 22rpx;
		display: flex;
		justify-content: center;
		color: #999;
		margin-top: 15rpx;
	}

	.scroll-Y {
		height: 580rpx;
	}

	.scroll-view-item {
		height: 580rpx;
	}

	// 滚动条样式
	/deep/ ::-webkit-scrollbar {
		/*滚动条整体样式*/
		width: 4px !important;
		height: 1px !important;
		overflow: auto !important;
		background: #ccc !important;
		-webkit-appearance: auto !important;
		display: block;
	}

	/deep/ ::-webkit-scrollbar-thumb {
		/*滚动条里面小方块*/
		border-radius: 10px !important;
		box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
		background: #dedcdc !important;
	}

	/deep/ ::-webkit-scrollbar-track {
		/*滚动条里面轨道*/
		// box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
		// border-radius: 10px !important;
		background: #F7F7F7 !important;
	}
</style>